<template>
	<view class="container">
		<scroll-view scroll-y class="scroll__containt" >
			<image class="banner__img" src="@/static/image/community/banner-bg01.png" lazy-load></image>
			<view class="content__body">
				<text class="content__body--title">选择社区</text>
				<view class="list__community">
					<view class="item">
						<text class="item__name active">东信社区</text>
						<text class="selected__item">上次选择</text>
					</view>
					<view class="item" @tap="selectCommunityHandle('1')">
						<text class="item__name">闸弄口社区</text>
					</view>
					<view class="item">
						<text class="item__name">上保社区</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from "@/http/api";
	import { mapState } from 'vuex'
	export default {
		components: {
			
		},
		data() {
			return {
				// communityList: [{
				// 	id: 1,
				// 	name: '东信社区'
				// },{
				// 	id: 2,
				// 	name: '上保社区'
				// },{
				// 	id: 3,
				// 	name: '上保社区'
				// }],
			}
		},
		computed: {
			...mapState(['communityList','currentcommunityCode']),
			disabled(){
				return !(this.communityCode && this.residentialCode && this.houseInfo);
			}
		},
		methods: {
			// 选择社区
			selectCommunityHandle(id){
				console.log(1)
				this.$request({
					url: api.selectCommunity,
					data: {
						communityCode: id
					}
				}).then( res => {
					// 跳转首页
					uni.navigateTo({
						url: '/pages/tabBar/index/indexNew'
					})
				})
				
			}
		},
		onLoad(option) {
			
		}
	}
</script>

<style lang="scss" scoped>
	.scroll__containt {
		height: 100vh;
		background-color: $uni-bg-color;
	}
	

	
	.banner__img {
		width: 100%;
		height: 340rpx;
	}
	.content__body {
		position: relative;
		top: -50rpx;
		padding: 50rpx 32rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: $uni-bg-color;
		
		&--title {
			display: flex;
			margin-bottom: 56rpx;
			font-size: 48rpx;
		}
	}
	
	.list__community {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.item {
			position: relative;
			display: flex;
			margin-bottom: 40rpx;
			width: 590rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 50rpx;
			border: 1rpx solid #FF6C25;
			justify-content: center;
			align-items: center;
			
			.item__name {
				font-size: 36rpx;
				&.active {
					color: #FF6C25;
				}
			}
			
			.selected__item {
				position: absolute;
				right: 28rpx;
				width: 144rpx;
				height: 44rpx;
				background-color: #FF6C25;
				border-radius: 32rpx;
				color: #FFFFFF;
				font-size: $uni-font-size-sm;
				text-align: center;
			}
		}
	}

</style>
